<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket示例</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">
    <style>
        .el-row {
            margin-bottom: 20px;
        }

        .el-row:last-child {
            margin-bottom: 0;
        }

        .sysFile {
            margin-bottom: 5px;
        }

        .sysFile:last-child {
            margin-bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-button @click="_initSockJs" type="primary" :disabled="isConnected">手动连接</el-button>
            <el-button @click="_destroySockJs" type="danger" :disabled="!isConnected">断开连接</el-button>
        </el-header>
        <el-main>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card>
                        <div slot="header">
                            <span>总人数</span>
                        </div>
                        <span> {{ userTotal }}</span>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card>
                        <div slot="header">
                            <span>在线人数</span>
                        </div>
                        <span> {{ userOnline }}</span>
                    </el-card>
                </el-col>
            </el-row>
        </el-main>
    </el-container>
</div>
</body>
<script src="js/sockjs.min.js"></script>
<script src="js/stomp.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.21/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.11/index.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
<script>
    // 服务器端点
    const userTotalWsHost = "http://localhost:9400/notification";
    // 总人数
    const userTotalWsTopic = "/statistical/user/total";

    // 服务器端点
    const userOnlineWsHost = "http://localhost:9400/notification";
    // 在线人数
    const userOnlineWsTopic = "/statistical/user/online";

    const app = new Vue({
        el: '#app',
        data: function () {
            return {
                isConnected: false,
                stompClient: {},
                socket: {},
                userTotal: 0,
                userOnline: 0,
            }
        },
        methods: {
            _getUserTotal() {
                axios.get('/notification/user/total')
                    .then((response) => {
                        this.userTotal = response.data.data
                    });
            },
            _getUserOnline() {
                axios.get('/notification/user/online')
                    .then((response) => {
                        this.userOnline = response.data.data
                    });
            },
            _initSockJs() {
                this._getUserTotal();
                this.userTotalSocket = new SockJS(userTotalWsHost);
                this.userTotalStompClient = Stomp.over(this.userTotalSocket);
                this.userTotalStompClient.connect({}, (frame) => {
                    // 另外再注册一下消息推送
                    this.userTotalStompClient.subscribe(userTotalWsTopic, (response) => {
                        this.userTotal = response.body
                    });
                });
                this._getUserOnline();
                this.userOnlineSocket = new SockJS(userOnlineWsHost);
                this.userOnlineStompClient = Stomp.over(this.userOnlineSocket);
                this.userOnlineStompClient.connect({}, (frame) => {
                    // 另外再注册一下消息推送
                    this.userOnlineStompClient.subscribe(userOnlineWsTopic, (response) => {
                        this.userOnline = response.body
                    });
                });
                this.isConnected = true;
                this.$message('websocket服务器连接成功');
            },
            _destroySockJs() {
                if (this.userTotalStompClient != null) {
                    this.userTotalStompClient.disconnect();
                    this.userTotalSocket.onclose;
                    this.userTotalSocket.close();
                    this.userTotalStompClient = {};
                    this.userTotalSocket = {};
                    this.userTotal = null;
                }
                if (this.userOnlineStompClient != null) {
                    this.userOnlineStompClient.disconnect();
                    this.userOnlineSocket.onclose;
                    this.userOnlineSocket.close();
                    this.userOnlineStompClient = {};
                    this.userOnlineSocket = {};
                    this.userOnline = null;
                }
                this.isConnected = false;
                console.log('websocket断开成功！');
                this.$message.error('websocket断开成功！');
            }
        },
        mounted() {
            this._initSockJs();
        },
        beforeDestroy() {
            this._destroySockJs();
        }

    })
</script>
</html>